<!--  -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="仓库信息">
                            <a-select v-model="storeId" placeholder="请选择" @change="getConfig()">
                                <a-select-option v-for="(item,i) in storeList" :key="i" :value="item.storehouseId">{{item.storehouseName}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="日期类型">
                            <a-select v-model="dateType" placeholder="请选择" allowClear @change="getConfig()">
                                <a-select-option v-for="(item,i) in dateTypeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="状态">
                            <a-select v-model="status" placeholder="请选择" allowClear @change="getConfig">
                                <a-select-option :value="0">关闭</a-select-option>
                                <a-select-option :value="1">开启</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="16" :sm="24">
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button style="margin-right: 20px" type="primary" @click="getConfig()">查询</a-button>
                            <a-button style="margin-right: 20px" icon="plus" @click="add()">新增</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table rowKey="id" :loading="isload" @change="handleTableChange" :columns="columns" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}" :data-source="configList"  size="small" :scroll="{ x: 1000, }">
            <div slot="storehouseId" slot-scope="storehouseId">
                <div v-for="(item,i) in storeList" :key="i">
                    <a-tag v-if="item.storehouseId == storehouseId" :color="colors[i%13]">{{item.storehouseName}}</a-tag>
                </div>
            </div>
            <div slot="purchaseStartTime" slot-scope="purchaseStartTime,record">
                <span>{{record.purchaseStartTime}}~{{record.purchaseEndTime}}</span>
            </div>
            <div slot="deliveryStartTime" slot-scope="deliveryStartTime,record">
                <span>{{record.deliveryStartTime}}~{{record.deliveryEndTime}}</span>
            </div>
            <div slot="dateType" slot-scope="dateType">
                <div v-for="(item,i) in dateTypeList" :key="i">
                    <a-tag v-if="item.id == dateType" :color="colors[i%13]">{{item.name}}</a-tag>
                </div>
            </div>
           
            <div slot="status" slot-scope="status">
                <a-switch checked-children="开" un-checked-children="关" disabled :checked="status == 1 ? true : false" />
            </div>
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-button type="link" @click="update(record)">修改</a-button>
                    <a-popconfirm
                        title="是否确认删除当前数据?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="del(record)"
                    >
                        <a-button type="link">删除</a-button>
                    </a-popconfirm>
                </div>
            </template>
        </a-table>

        <a-modal
            title="添加、修改送达时间"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            >
            <div>
                <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
                    <a-form-item label="所在仓库">
                        <a-select v-model="config.storehouseId" placeholder="请选择">
                            <a-select-option v-for="(itm) in storeList" :value="itm.storehouseId" :key="itm.storehouseId">{{itm.storehouseName}}</a-select-option>
                        </a-select>       
                    </a-form-item>
                    <a-form-item label="购买时间">
                        <a-space >
                           <a-time-picker :value="moment(config.purchaseStartTime, 'HH:mm')"   format="HH:mm"  @change="purchaseStartTimeChange"  /> ～<a-time-picker  :value="moment(config.purchaseEndTime, 'HH:mm')"  format="HH:mm" @change="purchaseEndTimeChange"  /> 
                        </a-space>
                    </a-form-item>
                    <a-form-item label="送达时间">
                        <a-space >
                           <a-time-picker :value="moment(config.deliveryStartTime, 'HH:mm')"   format="HH:mm" @change="deliveryStartTimeChange" /> ～<a-time-picker  :value="moment(config.deliveryEndTime, 'HH:mm')"  format="HH:mm" @change="deliveryEndTimeChange" /> 
                        </a-space>
                    </a-form-item>
                    <a-form-item label="日期类型">
                        <a-radio-group v-model="config.dateType" >
                            <a-radio :value="0">当日</a-radio>
                            <a-radio :value="1">次日</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="是否开启">
                        <a-radio-group v-model="config.status" >
                            <a-radio value="0">关闭</a-radio>
                            <a-radio value="1">开启</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { queryGoodsTimeConfig , updateGoodsTimeConfig , updateAllChannelConfig } from '@/api/run';
import { queryGoodsStorehouseBindConfig } from '@/api/newMall';
import { columns } from './table';
import moment from 'moment';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            brandName: '',
            configList: [],
            status: undefined,
            purchaseStartTime:"",
            size: 10,
            page: 1,
            total: 0,
            isload: false,
            columns,
            visible: false,
            config: {
                id: '',
                storehouseId: undefined,
                deliveryStartTime: '',
                deliveryEndTime: '',
                purchaseStartTime: '',
                purchaseEndTime: '',
                dateType: 0,
                status: '1'
            },
            drawerVisible: false,
            dateType:undefined,
            dateTypeList: [
                { id: 0, name: '当日'},
                { id: 1, name: '次日'},
            ],
            isload: false,
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            storeId: undefined,
            storeList: [],
            userId: sessionStorage.getItem('userId'),
        };
    },
    async created(){
        await this._queryGoodsStorehouseBindConfig();
        this.getConfig()
    },
    methods: {
        moment,
        // 查询用户所包含的仓库信息
        _queryGoodsStorehouseBindConfig(){
            let _this = this;
            return new Promise((resolve,reject) => {
                queryGoodsStorehouseBindConfig({userId: _this.userId,size: 99})
                .then(res => {
                    if(res.success){
                        _this.storeList = res.data.content;
                        _this.storeId = res.data.content.length > 0 ? res.data.content[0].storehouseId : '';
                        resolve();
                    }else{
                        reject(res.errMessage);
                    }
                })
            })
        },
        getConfig(){
            let _this = this
            const params = {
                'brandId':_this.brandId,
                'dateType':_this.dateType,
                'status':_this.status,
                'storehouseId': _this.storeId,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryGoodsTimeConfig(params)
            .then(res=>{
                if(res.success){
                    _this.configList = res.data.content
                    _this.total = res.data.totalElements
                    _this.isload = false
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getConfig()
        },
        // 添加
        add(){
            this.config.id=undefined
            this.config.brandId = this.brandId
            this.config.purchaseStartTime='00:00'
            this.config.purchaseEndTime =  '00:00'
            this.config.dateType = 0
            this.config.deliveryStartTime ='00:00'
            this.config.deliveryEndTime ='00:00'
            this.config.status = '1'
            this.config.storehouseId = this.storeId;
            this.visible = true
        },
        // 修改
        update(item){
            this.config = JSON.parse(JSON.stringify(item))
            this.visible = true
        },
        purchaseStartTimeChange(value, dateString) {
            this.config.purchaseStartTime = dateString
        },
        purchaseEndTimeChange(value, dateString) {
            this.config.purchaseEndTime = dateString
        },
        deliveryStartTimeChange(value, dateString) {
            this.config.deliveryStartTime = dateString
        },
        deliveryEndTimeChange(value, dateString) {
            this.config.deliveryEndTime = dateString
        },
        // 确定添加、修改
        handleOk(){
            let _this = this
            if(_this.config.purchaseStartTime == null || _this.config.purchaseEndTime == null){
                this.$message.warning('请选择购买时间段');
                return
            }
            if(_this.config.deliveryStartTime == null || _this.config.deliveryEndTime == null){
                this.$message.warning('请选择送达时间段');
                return
            }
          
            const params = {
                'id':_this.config.id,
                'brandId':_this.brandId,
                'purchaseStartTime':_this.config.purchaseStartTime,
                'purchaseEndTime':_this.config.purchaseEndTime,
                'deliveryStartTime':_this.config.deliveryStartTime,
                'deliveryEndTime':_this.config.deliveryEndTime,
                'storehouseId': _this.config.storehouseId,
                'dateType':_this.config.dateType,
                'status':_this.config.status,
            }
            updateGoodsTimeConfig(params)
            .then(res=>{
                if(res.success){
                    _this.visible = false
                    _this.getConfig()
                    _this.$notification['success']({
                        message: '提示',
                        description: _this.config.id ? '修改成功' : '添加成功',
                        duration: 8,
                    })
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 删除
        del(item){
            let _this = this
            const params = {
                'id': item.id,
                'brandId':_this.brandId,
                'channelTag':item.channelTag,
                'isDelete':1,
            }
            updateGoodsTimeConfig(params)
            .then(res=>{
                if(res.success){
                    _this.getConfig()
                    _this.$notification['success']({
                        message: '提示',
                        description: '删除成功',
                        duration: 8,
                    })
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
    }
}

</script>
<style scoped>

</style>